<template>
	<view class="auditDetails">
		<view class="tabs">
			<view class="tab" v-for="(item,index) in tabs.list" :key="index" :class="{active:item.active}" @click="clickTab(item,index)">
				{{item.name}}
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick" :top="top+45+'px'" bottom="51px">
			<good-list :list="goods" @clickRow="clickRow" class="goodlist"></good-list>
		</mescroll-uni>
		
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	let that
	import goodList from "./goodList.vue";
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		props: {
			top: [Number, String],
		},
		computed: {
			...mapGetters(['userInfo', 'api']),
		},
		components: {
			goodList
		},
		data() {
			return {
				tabs: {
					index: 0,
					list: []
				},
				goods: [] ,//列表数据
				copyGoods:[],
				downOption: {
					auto: true ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textOutOffset:this.$t('mescroll.shifanggenxin'),
					textInOffset:this.$t('mescroll.xialashuaxin'),
					textLoading:this.$t('mescroll.jiazaizhong'),
					textSuccess:this.$t('mescroll.jiazaichenggong'),
					textErr:this.$t('mescroll.jiazaishibai'),
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无记录 ~',
						fixed:true,
						top: "200rpx",
					},
					textNoMore:this.$t('mescroll.chudile')
				}
			}
		},
		mounted(option) {
			that = this
			this.tabs.list = this.getFormattedDates('mm-dd')
			// 动态更新全局配置
			uni.$emit("setMescrollGlobalOption", {i18n: {type:uni.getLocale()}})
		},
		methods: {
			clickRow(){
				this.$emit("clickRow",true)
			},
			clickTab(item,i){
				if(item.active==true){
					item.active=false
					this.getList()
					return
				}
				this.tabs.list = this.tabs.list.map((item,index)=>{
					item.active=false
					if(index==i){
						item.active=true
					}
					return item
				})
				this.filterFn()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.goods = []
				// this.tabs.list = this.tabs.list.map((item,index)=>{
				// 	item.active=false
				// 	return item
				// })
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.getList()
				// this.mescroll.lockUpScroll(true)
			},
			getList() {
				uni.$u.http.get(this.api.api_v1_scheduleLive, {params:{clientType:4}}).then(res => {
					console.log(res);
					if(res.code==200&&res.data){
						this.goods=res.data
						this.copyGoods = JSON.parse(JSON.stringify(res.data))
						//根据时间过滤
						this.filterFn()
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
			//根据时间过滤
			filterFn(){
				let dateTime = this.tabs.list.find(item=>item.active==true)
				if(dateTime){
					this.goods = this.copyGoods.filter(item=>{
						let str = this.$u.timeFormat(item[4], 'mm-dd')
						if(str==dateTime.name){
							return item
						}
					})
					console.log(this.goods);
				}else{
					this.goods = this.copyGoods
				}
				
				
			},
			
			//点击空布局按钮的回调
			emptyClick() {
				
			},
			//获取最近5天的日期
			getFormattedDates(format) {
				var currentDate = new Date();
				// 获取前两天的两个日期
				var twoDaysAgo1 = new Date(currentDate);
				twoDaysAgo1.setDate(currentDate.getDate() - 2);

				var twoDaysAgo2 = new Date(currentDate);
				twoDaysAgo2.setDate(currentDate.getDate() - 1);

				// 获取后三天的三个日期
				var threeDaysLater1 = new Date(currentDate);
				threeDaysLater1.setDate(currentDate.getDate() + 1);

				var threeDaysLater2 = new Date(currentDate);
				threeDaysLater2.setDate(currentDate.getDate() + 2);

				var threeDaysLater3 = new Date(currentDate);
				threeDaysLater3.setDate(currentDate.getDate() + 3);
				// 格式化日期函数
				function formatDate(date, format) {
					var year = date.getFullYear().toString();
					var month = (date.getMonth() + 1).toString().padStart(2, '0');
					var day = date.getDate().toString().padStart(2, '0');
					var hours = date.getHours().toString().padStart(2, '0');
					var minutes = date.getMinutes().toString().padStart(2, '0');
					var seconds = date.getSeconds().toString().padStart(2, '0');
					format = format.replace('yyyy', year);
					format = format.replace('mm', month);
					format = format.replace('dd', day);
					format = format.replace('hh', hours);
					format = format.replace('MM', minutes);
					format = format.replace('ss', seconds);
					return format;
				}
				let arr = [{name:formatDate(twoDaysAgo1, format),date:formatDate(twoDaysAgo1, 'yyyy-mm-dd hh:MM:ss'),active:false},
					{name:formatDate(twoDaysAgo2, format),date:formatDate(twoDaysAgo2, 'yyyy-mm-dd hh:MM:ss'),active:false},
					{name:formatDate(currentDate, format),date:formatDate(currentDate, 'yyyy-mm-dd hh:MM:ss'),active:true},
					{name:formatDate(threeDaysLater1, format),date:formatDate(threeDaysLater1, 'yyyy-mm-dd hh:MM:ss'),active:false},
					{name:formatDate(threeDaysLater2, format),date:formatDate(threeDaysLater2, 'yyyy-mm-dd hh:MM:ss'),active:false},
				]
				return arr
			},
			// 轮播菜单
			swiperChange(e) {
				this.tabs.index = e.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.auditDetails {
		max-width: 790px;margin: auto;
		.tabs{
			display: flex;padding: 10px;justify-content: space-around;
			.tab{
				padding: 5px 10px;border-radius: 5px;background-color: #fff;color: #000;font-size: 12px;
			}
			.active{
				background-color: #ffaf01;color: #fff;
			}
		}
		.goodlist{
			max-width: 790px;margin: auto;
		}
	}
</style>